<template>
  <div>
    <el-card>
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="配件型号" prop="fitModelName">
          <el-input
            v-model="formInline.fitModelName"
            placeholder="请输入配件型号名称"
            clearable
            @change="handlergetFitModelList"
          ></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="handlergetFitModelList"
            >查询</el-button
          >
          <el-button type="success" @click="showadd">添加配件型号</el-button>
        </el-form-item>
      </el-form>
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="fitModelName" label="配件名称" width="180">
        </el-table-column>
        <el-table-column prop="add_time" label="添加时间" width="180">
        </el-table-column>
        <el-table-column prop="update_time" label="	更新时间"> </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="primary" size="small" @click="showEdit(scope.row)"
              >编辑</el-button
            >
            <el-button
              type="danger"
              size="small"
              @click="handlerDel(scope.row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <div class="pagination">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-sizes="[10, 20, 30, 40, 50]"
          :page-size="formInline.pageSize"
          :current-page="formInline.pageNumber"
          layout="total, sizes, prev, pager, next, jumper"
          :total="count"
          class="management_page"
        ></el-pagination>
      </div>
      <!-- 配件型号弹狂 -->

      <el-dialog
        :title="partsTypeName"
        :visible.sync="dialogVisible"
        width="30%"
        :before-close="handleClose"
      >
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="配件型号" prop="fitModelName">
            <el-input v-model="ruleForm.fitModelName"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="handlersure">确 定</el-button>
        </span>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import {
  getFitModelList,
  insertFitModel,
  updateFitModel,
  deleteFitModel,
} from "../../utils/api";

export default {
  data() {
    return {
      formInline: {
        pageNumber: 1,
        pageSize: 10,
        fitModelName: "",
      },
      tableData: [],
      count: 0,
      partsTypeName: "添加配件型号",
      dialogVisible: false,
      ruleForm: {
        fitModelName: "",
        fitModelId: "",
      },
      rules: {
        fitModelName: [
          { required: true, message: "请输入配件型号名称", trigger: "blur" },
        ],
      },
    };
  },
  created() {
    this.handlergetFitModelList();
  },
  methods: {
    //   获取配件列表
    handlergetFitModelList() {
      this.postRequest(getFitModelList, this.formInline).then((res) => {
        if (res.code == 200) {
          this.tableData = res.data.list;
          this.count = res.data.count;
        }
      });
    },
    // 显示配件弹框
    showadd() {
      this.partsTypeName = "添加配件型号";
      this.dialogVisible = !this.dialogVisible;
    },
    //显示编辑的弹框
    showEdit(row) {
      this.partsTypeName = "编辑配件型号";
      this.ruleForm.fitModelId = row.id;
      this.ruleForm.fitModelName = row.fitModelName;
      this.dialogVisible = !this.dialogVisible;
    },
    // 封装一个添加配件型号的方法
    handleradd() {
      this.postRequest(insertFitModel, this.ruleForm).then((res) => {
        if (res.code == 200) {
          this.$message.success("添加配件型号成功");
          this.dialogVisible = false;
          this.handlergetFitModelList();
        }
      });
    },
    // 封装一个编辑配件型号的方法
    handleredit() {
      this.postRequest(updateFitModel, this.ruleForm).then((res) => {
        if (res.code == 200) {
          this.$message.success("编辑配件型号成功");
          this.dialogVisible = false;
          this.handlergetFitModelList();
        }
      });
    },

    // 点击确定
    handlersure() {
      this.$refs.ruleForm.validate((valid) => {
        if (!valid) return this.$message.error("请填写完整");
        if (this.partsTypeName == "添加配件型号") {
          this.handleradd();
          this.ruleForm.fitModelName = "";
          this.ruleForm.fitModelId = "";
        } else if (this.partsTypeName == "编辑配件型号") {
          this.handleredit();
          this.ruleForm.fitModelName = "";
          this.ruleForm.fitModelId = "";
        }
      });
    },
    handlerDel(id) {
      this.$confirm("您确定删除该配件型号吗, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.postRequest(deleteFitModel, { fitModelId: id }).then((res) => {
            if (res.code == 200) {
              this.$message({
                type: "success",
                message: "删除成功!",
              });
              this.handlergetFitModelList();
              this.ruleForm.fitModelName = "";
              this.ruleForm.fitModelId = "";
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    handleClose() {
      this.dialogVisible = false;
      this.ruleForm.fitModelName = "";
      this.ruleForm.fitModelId = "";
    },
    // 分页
    handleSizeChange(val) {
      this.formInline.pageSize = val;
      this.handlergetFitModelList();
    },
    handleCurrentChange(val) {
      this.formInline.pageNumber = val;
      this.handlergetFitModelList();
    },
  },
};
</script>

<style>
</style>